<template>
  <div class="analysis">
    <a-row style="margin-top: 0" :gutter="[24, 24]">
      <a-col :sm="24" :md="12" :xl="6">
        <chart-card :loading="loading" title="物帐卡准确率" total="80.00%">
          <a-tooltip title="根据盘点结果计算" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6">
        <chart-card :loading="loading" title="仓库预警" total="9">
          <a-tooltip title="安全库存、有效期、呆滞" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6">
        <chart-card :loading="loading" title="待入库" total="6">
          <a-tooltip title="未完成的入库通知单" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6">
        <chart-card :loading="loading" title="待出库" total="4">
          <a-tooltip title="未完成的出库通知单" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
        </chart-card>
      </a-col>
    </a-row>
    <a-card :loading="loading" style="margin-top: 24px" :bordered="false" :body-style="{ padding: '24px' }">
      <div class="salesCard">
        <a-tabs default-active-key="出入库" size="large" :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }">
          <div class="extra-wrap" slot="tabBarExtraContent">
            <div class="extra-item">
              <a>日</a>
              <a>周</a>
              <a>月</a>
              <a>年</a>
            </div>
            <a-range-picker :style="{ width: '256px' }"></a-range-picker>
          </div>
          <a-tab-pane loading="true" tab="出入库" key="出入库">
            <bar />
          </a-tab-pane>
          <a-tab-pane tab="采购入库" key="采购入库">
            <bar />
          </a-tab-pane>
          <a-tab-pane tab="生产领料" key="生产领料">
            <bar />
          </a-tab-pane>
          <a-tab-pane tab="生产入库" key="生产入库">
            <bar />
          </a-tab-pane>
          <a-tab-pane tab="销售发货" key="销售发货">
            <bar />
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>
  </div>
</template>

<script>
import ChartCard from '@/components/card/ChartCard'
import Bar from '@/components/chart/Bar'

export default {
  data() {
    return {
      loading: true
    }
  },
  created() {
    setTimeout(() => this.loading = !this.loading, 1000)
  },
  components: { Bar, ChartCard }
}
</script>

<style lang="less" scoped>
.extra-wrap {
  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a:not(:first-child) {
      margin-left: 24px;
    }
  }
}

@media screen and (max-width: 992px) {
  .extra-wrap .extra-item {
    display: none;
  }
}

@media screen and (max-width: 576px) {
  .extra-wrap {
    display: none;
  }
}
</style>
